/*
 * @Author: thl
 * @Date: 2023-06-16 13:46:05
 * @FilePath: \cw_web\gl\src\views\dataBoard\components\formChart.jsx
 * @Descripttion: 
 */
import React, { Component } from "react";
import echarts from "echarts";
import PropTypes from "prop-types";
let myChart = null
class TheLineChart extends Component {

    componentDidMount() {
        myChart = echarts.init(this.chartRef);

    }
    set(data) {
        myChart.setOption({
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: ['绑定', '非绑定'],
                orient: 'vertical',
                left: 'center',
                bottom: 'bottom',
            },
            xAxis: {
                data: data.legend
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    name: '绑定',
                    type: 'bar',
                    barWidth: '25%',
                    data: data.buy,
                    itemStyle: {
                        color: "#3AA0FF"
                    }
                },
                {
                    name: '非绑定',
                    type: 'bar',
                    barWidth: '25%',
                    data: data.unBuy,
                    itemStyle: {
                        color: "#4ECB73"
                    }
                },
            ]
        }, true);
    }
    render() {
        return (
            this.props.lineXData &&
            this.props.lineYData && (
                <div
                    ref={(ref) => (this.chartRef = ref)}
                    id="lineChart"
                    style={{ width: "100%", height: "100%" }}
                />
            )
        );
    }
}

TheLineChart.propTypes = {
    lineXData: PropTypes.array,
    lineYData: PropTypes.array,
    name: PropTypes.string,
    yName: PropTypes.string,
    xName: PropTypes.string,
};
TheLineChart.defaultProps = {
    lineXData: ["0"],
    lineYData: ["0"],
    legend: [],
};
export default TheLineChart;
